<template lang="pug">
  Modal(
    width="700"
    v-model="importModal"
    title="客户导入"
  )
    .file-box
      .down-load(@click="exportTemplate")
        Button 模板下载
        .text-gray-9.pt-10.pb-10 下载可以导入客户的模板文件
      Upload.up-load(
        ref="upload"
        :before-upload="handleBeforeUploadBatchImport"
        :on-success="uploadSuccessBatchImport"
        :max-size="10 * 1024"
        :action="uploadBaseUrl + 'api/SalesCustomer/ImportCustomers'"
        :show-upload-list="false"
        :headers="headers"
      )
        Button(type="info") 选择文件
        .text-gray-9.pt-10.pb-10 仅支持上传10M以内的xlsx文件
        p(v-if="file")
          | 已选择：
          Tag {{file.name}}
    .fail-box(v-if="errorData.isError" @click="downLoadFailFile")
      | 下载错误文件： {{errorData.downLoadUrl}}


    .clearfix(slot="footer")
      Button(type="text" @click="cancel") 取消
      Button(type="primary" @click="submit") 提交
</template>

<script>
import Cookies from 'js-cookie'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro.replace('/api', '/')

export default {
  props: {
  },
  data () {
    return {
      headers: {
        'Authorization': 'Bearer ' + Cookies.get('clientToken')
      },
      uploadBaseUrl: baseUrl,
      importModal: false,
      file: null,
      errorData: {
        isError: false,
        downLoadUrl: null
      }
    }
  },
  methods: {
    show () {
      this.importModal = true
    },
    // 下载导入模板
    exportTemplate () {
      const link = document.createElement('a')
      link.download = ''
      link.href = baseUrl + 'Content/Template/批量导入销售客户模板.xls'
      console.log(link.href)
      link.click()
    },
    // -选择文件
    handleBeforeUploadBatchImport (file) {
      this.file = file
      this.errorData.isError = false
      console.log('file: ', this.file)
      return false
    },
    uploadSuccessBatchImport (res) {
      if (res.success) {
        this.$Message.success(res.message)
        this.errorData = {
          isError: false,
          downLoadUrl: null
        }
        this.file = null
        this.importModal = false
        this.$emit('get-list')
      } else {
        this.$Message.error({
          content: res.message,
          duration: 10,
          closable: true
        })
        if (res.data) {
          this.errorData.isError = true
          this.errorData.downLoadUrl = baseUrl + res.data
        }
      }
    },
    downLoadFailFile () {
      const link = document.createElement('a')
      link.download = ''
      link.href = baseUrl + 'api/SalesCustomer/ExportErrorFile?fileName=' + this.errorData.downLoadUrl
      link.click()
    },
    cancel () {
      this.importModal = false
      this.file = null
      this.errorData = {
        isError: false,
        downLoadUrl: null
      }
    },
    submit () {
      if (this.file) {
        this.$refs.upload.post(this.file)
      } else {
        this.$Message.warning('请选择文件！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .file-box{
    display: flex;
    > div{
      flex: 1;
      margin: 0 10px;
      padding: 15px;
      border: 1px dashed #eee;
      cursor: pointer;
      text-align: center;
    }
  }
  .fail-box{
    border: 1px dashed #ffb31a;
    text-align: center;
    margin-top: 10px;
    padding: 15px;
    cursor: pointer;
    color: #ffb31a;
  }
</style>
